<template>
	<view class="animated fadeIn faster">
		<view class="px-3 pt-3 pb-3 mb-10 bg-fff brd24">
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">姓名</text>
				<input class="d-flex-item" v-model="form.name" placeholder="请输入您的姓名" placeholder-class="colorhold" />
				<view v-if="form.name" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorccc" @click="()=>form.name=''"></text></view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">性别</text>
				<view>
					<uni-data-checkbox v-model="form.gender" :localdata="sexs" />
				</view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">证件照</text>
				<input class="d-flex-item" v-model="form.id_card" placeholder="请输入身份证号" placeholder-class="colorhold" />
				<view v-if="form.id_card" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorccc" @click="()=>form.id_card=''"></text></view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">手机号</text>
				<input class="d-flex-item" v-model="form.phone" placeholder="请输入手机号" placeholder-class="colorhold" />
				<view v-if="form.phone" class="w-8 d-flex d-flex-end"><text class="iconfont icon-cuowu1 colorccc" @click="()=>form.phone=''"></text></view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3" @click="openPicker">
				<text class="w-15">所在地区</text>
				<view class="d-flex d-flex-item d-flex-middle d-flex-between">
					<text :class="form.address?'':'colorhold'">{{form.address?form.address:'请选择省市区县'}}</text>
					<text class="iconfont icon-arrow-right1 color999"></text>
				</view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">入伍时间</text>
				<view class="d-flex d-flex-item d-flex-middle d-flex-between">
					<picker mode="date" :value="form.join_time" :start="startDate" :end="endDate" @change="bindDateIn" class="d-flex-item">
						<text>{{form.join_time}}</text>
					</picker>
					<text class="iconfont icon-arrow-right1 color999"></text>
				</view>
			</view>
			<view class="addr-item d-flex d-flex-middle mb-3">
				<text class="w-15">退伍时间</text>
				<view class="d-flex d-flex-item d-flex-middle d-flex-between">
					<picker mode="date" :value="form.out_time" :start="startDate" :end="endDate" @change="bindDateOut" class="d-flex-item">
						<text>{{form.out_time}}</text>
					</picker>
					<text class="iconfont icon-arrow-right1 color999"></text>
				</view>
			</view>
		</view>
		<view class="px-3">
			<view class="d-flex d-flex-center d-flex-middle rounded40 bg-main main-color colorfff font32 py-2" @click="sure">保存</view>
			<!-- <view class="mb-3 d-flex d-flex-middle line-height0" style="margin-top: 10rpx;">
				<checkbox :checked="isChecked" style="transform:scale(0.6)" @click="isChecked = !isChecked"></checkbox>
				<text class="font24 color999" @click="isChecked = !isChecked">我已阅读并同意</text>
				<text class="font24 main-color">《信息采集声明》</text>
			</view> -->
		</view>
		<my-city-picker :province="province" :city="city" :area="area" :show="show" @changeClick="changeClick" @sureSelectArea="onsetCity" @hideShow="onhideShow"></my-city-picker>
	</view>
</template>

<script>
	import { userApi } from '@/http/userApi';
	import store from '@/store/index.js';
	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}
	export default {
		data() {
			return {
				form:{
					name:'',
					gender:'1',
					id_card:'',
					phone:'',
					address:'',
					user_id:'',
					join_time:getDate({format: true}),
					out_time:getDate({format: true})
				},
				sexs: [{
					text: '男',
					value: '1'
				}, {
					text: '女',
					value: '2'
				}],
				show: false,
				province: "湖北省",
				city: "武汉市",
				area: "洪山区",
				areaCode: "420111",
				isChecked:false,
				getAddress:'',
				provinceLable:'',
				startDate:getDate('start'),
				endDate:getDate('end')
			}
		},
		onReady() {
			let that = this
			if(store.state.verify == 1){
				that.selectUser()
			}
		},
		methods: {
			openPicker() {
				this.show = true
			},
			changeClick(value, value2, value3, value4) {
				this.province = value;
				this.city = value2;
				this.area = value3;
				this.areaCode = value4;
			},
			onhideShow() {
			    this.show = false
			},
			onsetCity(e) {
				let data = e.detail.target.dataset;
				let address = data.province + '-' + data.city + '-' + data.area;
				this.show = false
			    this.form.address = address
			},
			bindDateIn: function(e) {
				this.form.join_time = e.detail.value
			},
			bindDateOut: function(e) {
				this.form.out_time = e.detail.value
			},
			async selectUser(){
				let that = this
				let userId = uni.getStorageSync('myId')
				try{
					let enrollInfo = await userApi.getUserInfo(userId)
					enrollInfo.gender = enrollInfo.gender+""
					that.form = enrollInfo
				}catch(e){
					//TODO handle the exception
				}
			},
			async sure(){
				let that = this
				if(!that.form.name){
					uni.showToast({
						title:'请输入您的姓名！',
						icon:'none'
					})
					return
				}
				if(that.form.phone.length != 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
					return
				}
				if(that.form.id_card.length != 18){
					uni.showToast({
						title:'请输入正确的身份证号',
						icon:'none'
					})
					return
				}
				
				if(that.form.address == ''){
					uni.showToast({
						title:'请选择省市区',
						icon:'none'
					})
					return
				}
				if(that.form.join_time == that.form.out_time){
					uni.showToast({
						title:'请选择正确的入伍退伍日期',
						icon:'none'
					})
					return
				}
				try{
					uni.showLoading({
						title:'确认中...'
					})
					that.form.user_id = uni.getStorageSync('myId')
					await userApi.enroll(that.form)
					store.commit('setVerify')
					uni.hideLoading()
					uni.showToast({
						title:'报名成功',
						duration:1500,
						complete() {
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}
					})
				}catch(e){
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style scoped>
.brd24{
	border-bottom-left-radius: 24rpx;
	border-bottom-right-radius: 24rpx;
}
.addr-item{
	padding-top: 15rpx;
	padding-bottom: 15rpx;
	border-bottom: 1px solid rgba(0, 0, 0, .03);
}
</style>
